<template>
  <view class="contianer">
    <scroll-view scroll-y class="viewport">
      <view>
        <u-popup :show="show" @close="close" @open="open">
          <view>
            <text>出淤泥而不染，濯清涟而不妖</text>
          </view>
        </u-popup>
        <u-button @click="show = true">打开</u-button>
      </view>

    </scroll-view>
    <view class="footer">
      <view>
        <text class="iconfont icon-chakantiezimaikefeng"></text>
      </view>
      <view class="input-box">
        <input type="text" placeholder="请输入">
      </view>
      <view>
        <text class="iconfont icon-xiaolian"></text>
        <text class="iconfont icon-jiahao"></text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
const show = ref(false);
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
</script>

<style scoped lang="scss">
.contianer {
  display: flex;
}

.viewport {
  height: 100%;
  width: 100%;
  flex: 1;
}

.footer {
  height: 100rpx;
  width: 100%;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .input-box {
    width: 80%;
    height: 60rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding-left: 30rpx;

    input {
      height: 100%;
      line-height: 60rpx;
    }
  }

  .iconfont {
    font-size: 36rpx;
  }
}
</style>